<script  lang="ts" setup name="Person">
  import {ref,watch} from "vue";
  //  数据
  let sum = ref(0)
  //  方法
  function changSum (){
    sum.value += 1
  }
  //  监视，情况一：监视【ref】定义的【基本数据】类型
 const stopWatch =  watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
   if (newValue>=10){
     stopWatch()
   }
  })
</script>

<template>
  <div class="prisonBox">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="changSum">点我sum+1</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>